<template>
  <div class="add-todo">
    <form @submit.prevent="handleSubmit" class="add-form">
      <input
        v-model="newTodo"
        type="text"
        placeholder="添加新任务..."
        class="todo-input"
        maxlength="100"
      />
      <button type="submit" class="add-btn" :disabled="!newTodo.trim()">
        <span class="add-icon">+</span>
        添加
      </button>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const newTodo = ref('')

const emit = defineEmits(['add-todo'])

const handleSubmit = () => {
  if (newTodo.value.trim()) {
    emit('add-todo', newTodo.value)
    newTodo.value = ''
  }
}
</script>